<template>
	<view class="que">
		<view class="spxx">
			<text class="xx">商品信息</text>
			<view class="tclx">
				<text class="lx">套餐类型：</text>
				<text class="lr">深度保洁4小时+油烟机拆洗+灶台清洗</text>
			</view>
			<view class="tclx">
				<text class="lx">有效期：</text>
				<text class="lr">购买后 <text style="color: #76c3a9;">60</text> 天有效</text>
			</view>
			<view class="tclx">
				<text class="lx">服务类型：</text>
				<text class="lr">油烟机拆洗+灶台清洗<text style="color: #76c3a9;">1</text>次 +深度保洁4小时<text
						style="color: #76c3a9;">1</text>次</text>
			</view>
			<view class="tclx">
				<text class="lx">服务城市：</text>
				<text class="lr">保定</text>
			</view>

		</view>
		<view class="yhq">
			<view class="tq">
				<text class="tyh">优惠券</text>
				<view class="yhq">
					<view class="jsyh">
						<view class="suj" style="color: #bebebe;">
							<text>￥</text>
							<text>0.5</text>
						</view>
						<text style="color: #b8b8b8;">无门槛</text>

					</view>
					<text class="wm" style="color: #b8b8b8;">享有无门槛限时立减0.5元</text>

					<image src="/static/已失效.png" mode=""></image>

				</view>
			</view>
		</view>
		<view class="ddxx">
			<text class="dd">订单信息</text>
			<view class="tcl">
				<text class="ll">订单金额：</text>
				<text class="lrl">￥414.0</text>
			</view>
			<view class="tcl">
				<text class="ll">订单编号：</text>
				<text class="lrl">37484646465465456464656464546 <text
						style="color: #76c3a9;padding-left: 4px;">复制</text></text>
			</view>
			<view class="tcl">
				<text class="ll">下单时间：</text>
				<text class="lrl">2025.02.18</text>
			</view>
			<view class="tcl">
				<text class="ll">支付方式：</text>
				<text class="lrl">微信支付</text>
			</view>
			<view class="tcl">
				<text class="ll">购买账号：</text>
				<text class="lrl">185****6725</text>
			</view>
		</view>
		<view class="btnn">
			<view class="qx">
				<u-button type="primary" color="#767676" size="mini" :plain="true" shape="circle" text="取消"></u-button>
			</view>
			<view class="qx">
				<u-button type="primary" color="#767676" :plain="true" size="mini" shape="circle" text="确认"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="less">
	.que {
		.spxx {
			margin: 8px 11px;

			.xx {
				font-size: 18px;
				font-weight: bold;
			}

			.tclx {
				margin-top: 15px;

				.lx {
					color: #a9a9a9;
				}

				.lr {}
			}

		}

		.yhq {
			.tq {
				margin-top: 15px;

				.tyh {
					margin-left: 8px;
					font-size: 18px;
					font-weight: bold;
					color: #000000;
				}

				.yhq {
					border-radius: 8px;
					padding: 8px;
					margin: 8px;
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					background-color: #fafafa;
					border: #727374 solid 1px;

					.jsyh {
						.suj {
							font-size: 15px;

						}
					}

					.wm {
						font-size: 15px;
					}

					image {
						width: 60px;
						height: 60px;
					}

				}
			}
		}

		.ddxx {
			margin: 8px 11px;

			.dd {
				font-size: 18px;
				font-weight: bold;
			}

			.tcl {
				margin-top: 15px;

				.ll {
					color: #a9a9a9;
				}

				.lrl {}
			}
		}

		.btnn {
			display: flex;
			justify-content: flex-end;

			.qx {
				margin-right: 12px;
			}
		}

	}
</style>